<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>美化下拉选择框</title>
  <style type="text/css">
    /* 第二步：开始写css样式 */
    body {
        background:#F1F1F1;
        display:flex;
        justify-content: center;
        align-items:center;
        flex-wrap:wrap;
        padding:0;
        margin:0;
        height:100vh;
        width:100vw;
        font-family: sans-serif;
        color:#FFF;
    }
    /* 首先，写好选择框的样式，使用弹性布局 */
    .select {
        display:flex;
        flex-direction: column;
        position:relative;
        width:250px;
        height:40px;
    }
    /* 其次，开始写每个选项的样式 */
    .option {
        padding:0 30px 0 10px;
        min-height:40px;
        display:flex;
        align-items:center;
        background:#333;
        border-top:#222 solid 1px;
        position:absolute;
        top:0;
        width: 100%;
        pointer-events:none;
        order:2;
        /* 这里我们把选择框z-index设置为1，在radio的上面 */
        z-index:1;
        transition:background .4s ease-in-out;
        box-sizing:border-box;
        overflow:hidden;
        white-space:nowrap; 
    }
    /* 鼠标移入改变选项背景色，过度动画上面的0.4秒 */
    .option:hover {
        background:#666;
    }
    
    .select:focus .option {
        position:relative;
        pointer-events:all;
    }

    /* 隐藏所有的radio */
    input {
        opacity:0;
        position:absolute;
        left:-99999px;
    }
     /* + 是兄弟选择器，input被选中后
    选择后往下数的第一个label，加下面的样式 
    弹性布局，当选中后把往下第一个lable用order:1排在第一个*/
    input:checked + label {
        order: 1;
        /* 选中的label显示在z轴的最上面 */
        z-index:2;
        background:#666;
        border-top:none;
        position:relative;
    }
    /* + 是兄弟选择器，input被选中后
    它后面的label同时更改样式 
    用来写选择框右边的倒三角*/
    input:checked + label:after {
        content:'';
        width: 0; 
        height: 0; 
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-top: 5px solid white;
        position:absolute;
        right:15px;
        top:calc(50% - 2.5px);
        pointer-events:none;
        z-index:3;
    }
    /* + 是兄弟选择器，input被选中后
    它前面的label同时更改样式 
    给倒三角区域加一个高宽和背景色
    */
    input:checked + label:before {
        position:absolute;
        right:0;
        height: 40px;
        width: 40px;
        content: '';
        background:#333;
    }
  </style>
</head>
<body>
    <!-- 第一步：写好下拉选择框的布局
    label和radio有关联关系，点击label后会根据for内的数据
    去找到对应的id一样的radio进行选中-->
    <div class="select" tabindex="1">
    <input class="selectopt" name="test" type="radio" id="opt1" checked>
    <label for="opt1" class="option">Oranges</label>

    <input class="selectopt" name="test" type="radio" id="opt2">
    <label for="opt2" class="option">Apples</label>

    <input class="selectopt" name="test" type="radio" id="opt3">
    <label for="opt3" class="option">Grapefruit</label>

    <input class="selectopt" name="test" type="radio" id="opt4">
    <label for="opt4" class="option">Bananas</label>
    
    <input class="selectopt" name="test" type="radio" id="opt5">
    <label for="opt5" class="option">Watermelon</label>
    </div>
</body>
</html>